<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib prefix="decorator"
	uri="http://claudiushauptmann.com/jsp-decorator/"%>
	<%@ page import="vn.fpt.fsoft.entity.User" %>

<decorator:decorate filename="MasterPage.jsp">
	<decorator:content placeholder="title">Amend User</decorator:content>
	<decorator:content placeholder="head">
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css"
			rel="stylesheet" type="text/css" />
		<link href="css/style-1.css" rel="stylesheet" type="text/css" />
		<script
			src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script
			src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		<script type="text/javascript"
			src="http://getbootstrap.com/dist/js/bootstrap.min.js">
		</script>
		<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
		<link rel="stylesheet" href="css/style-homepage.css" type="text/css" />

		<script>
			function logout() {
				$.ajax({
					url : "UserController?action=logout",
					type : "POST",
					success : function(data) {
						return true;
					},
					error : function(data) {
						return true;
					}
				});
			}

			function Click_Save() {
				$("#valid").html("");
				$("#invalid").html("");
				if (validate()) {
					bootbox.confirm("Are you sure you  want to save it?",
						function(result) {
							if (result == true) {
								var userID = getURLParameter("userID");
								var username = $("#username").val();
								var email = $("#email").val();
								var role = $("#role option:selected").val();
								var isactive = $("#isactive").prop("checked");
								$.ajax({
									url : "UserController?action=update&userID="+ userID
											+ "&email="+ email
											+ "&role="+ role
											+ "&isActive="+ isactive,
									type : "POST",
									success : function(data) {
										if (data == "Update Success!") {
												$("#valid").html(data);
										} else {
												$("#invalid").html(data);
										}
									},
									error : function(data) {
										alert("fail");
									}
								});
							} else {
								$("#username").focus();
							}
					});
				}
			}

			function clearAll() {
				document.getElementById("username").value = "";
				document.getElementById("password").value = "";
				document.getElementById("email").value = "";
				document.getElementById("role").value = "User";
			}

			function validate() {
				var valid = true;
				var error = "";
				$("#username").css("border-color", "");
				$("#password").css("border-color", "");
				$("#email").css("border-color", "");
				if ($("#username").val() == "") {
					error += "Please input the Username <br>";
					document.getElementById("username").style.borderColor = "red";
					valid = false;
				}
				if ($("#password").val() == "") {
					error += "Please input the Password <br>";
					document.getElementById("password").style.borderColor = "red";
					valid = false;
				}
				if ($("#email").val() == "") {
					error += "Please input the Email <br>";
					document.getElementById("email").style.borderColor = "red";
					valid = false;
				} else {
					if (validateEmail($("#email").val()) == false) {
						error += "Email is not valid <br>";
						document.getElementById("email").style.borderColor = "red";
						valid = false;
					}
				}
				$("#invalid").html(error);
				return valid;
			}
			/*Validate Email*/
			function validateEmail(email) {
				var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
				return re.test(email);
			}

			function load(result) {
				$("#table").empty();
				$("#table").append(result);
			}
			$(document).ready(function() {
				$("#tabs").tabs();
				$("#username").focus();
			});

			$(window).load(function() {
				var userID = getURLParameter("userID");
				$.ajax({
					url : "UserController?action=getUser&userID=" + userID,
					type : "POST",
					success : function(result) {
						load(result);
					},
					error : function(result) {
						alert("fail");
					}
				});
			})

			function getURLParameter(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '='
						+ '([^&;]+?)(&|#|;|$)').exec(location.search) || [ , "" ])[1]
						.replace(/\+/g, '%20'))|| null
			}
			function goBack() {
				window.location = "ListUser.jsp";
			}
		</script>
	</decorator:content>
	<decorator:content placeholder="body">
	<%
		User user = (User) request.getSession().getAttribute("user");
		if(user == null) {
		    response.sendRedirect("login.jsp");
		}
	%>
		<!--Main Text starts-->
		<p style="color: #0C3; font-size: 24px; font-weight: bold;">Amend User</p>
		<div id="tabs" style="width: 795px;">
			<ul>
				<li><a href="#detail1">Detail</a></li>
				<li style="float: right">
					<input type="button" value="Save" onclick="Click_Save();" /> &nbsp;&nbsp; 
					<input type="button" value="Back" onclick="goBack();"></input>
				</li>
			</ul>
			<div id="detail1" style="background-color: #EFEFEF;">
				<table style="width:703; cellpadding=10;" id="table"></table>
				<br /> <br /> <br />
				<p id="invalid" style="color: #F00; font-size: 14px"></p>
				<p id="valid" style="color: green; font-size: 14px"></p>
			</div>
		</div>
	</decorator:content>
</decorator:decorate>